<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{list-style: none;}
        .l-name{width: 80px;display: inline-block;text-align: right;}
    </style>
    <!-- 
        5. 根据数据arr生成以下表单效果
            PS：根据type类型不同，生成不同的表单元素
     -->
</head>
<body>
    <div class="box">
        <!-- <ul>
            <li>
                <label for=""></label>
                <input type="" name="">
                <select name="" id="">
                    <option value=""></option>
                </select>
                <label for=""></label>
                <input type="" name="" value="">
            </li>
        </ul> -->
    </div>
    <script>
        var arr = [{
            label: "用户名",
            name: "username",
            type: "text"
        }, {
            label: "密码",
            name: "password",
            type: "password"
        }, {
            label: "性别",
            name: "gender",
            type: "select",
            options: ['男', '女', '不男', '不女', 'Gay', '妖王']
        }, {
            label: "爱好",
            name: "hobby",
            type: "checkbox",
            options: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']
        }, {
            label: '是否已婚',
            name: 'married',
            type: 'radio',
            options: ['已婚', '未婚']
        },
        {
            label: '简介',
            name: 'resume',
            type: 'textarea'
        }];
        const box = document.querySelector('.box')
        const ul = document.createElement('ul')
        ul.innerHTML = arr.map((item)=>{
            let str = ''
            if(item.type=='select'){
                // 遍历options数组，拿到每一项的值
                // item.options.map((el)=>{
                //     return `<option value="${el}"></option>`
                //     return `<input type="${item.type}" name="${item.name}" value="${el}">`
                // }).join('')

                str = `
                    <select name="${item.name}">
                    ${item.options.map((el)=>{
                        return `<option value="${el}">${el}</option>`
                    }).join('')}
                    </select>`    
            }else if(item.type=='checkbox'){
                str = `
                    ${item.options.map((el)=>{
                        return `<input type="${item.type}" name="${item.name}" value="${el}">${el}`
                     }).join('')}`
            }else if(item.type=='radio'){
                str = `
                    ${item.options.map((el)=>{
                        return `<input type="${item.type}" name="${item.name}" value="${el}">${el}`
                    }).join('')} `
            } else {
                str = `
                    <input type="${item.type}" name="${item.name}"> `
            }

            return  `<li>
                    <label class="l-name" >${item.label}:&nbsp</label>
                    ${str}
                </li>`
        }).join('')
        box.appendChild(ul)
        
    </script>
</body>
</html>